import React, { PureComponent } from "react";
import { Howl } from 'howler';
import {
  Footer,
  Header,
  Arwes,
  Image,
  Words,
  Frame,
  Content,
  Link,
  Row,
  Col,
  List,
} from "arwes";
export default class paper extends PureComponent {
  constructor(props) {
    super(props);
    this.sounds = {
      click: new Howl({
        src: ['./sound/click.mp3']
      }),
      typing: new Howl({
        src: ['./sound/typing.mp3']
      }),
      deploy: new Howl({
        src: ['./sound/deploy.mp3']
      }),
    }
    this.state = {
      show: false
    };
  }
  componentDidMount() {
    this.setState({
      show: true
    })
  }
  gohome = (url) => {
    if (this.props.location.pathname == url) {
      return
    }
    console.log(url)
    this.sounds.click.play()
    this.sounds.deploy.play()
    this.setState({
      show: !this.state.show
    });
    setTimeout(() => {
      this.props.history.push(url);
    }, 500);
  }
  render() {
    return (
      <Arwes
        timeout={1500}
        animate
        show={this.state.show}
        background="./img/background-large.jpg"
        pattern="./img/glow.png"
        style={{ height: '100%' }}
      >
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          <Header animate show={this.state.show}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <a style={{
                textAlign: 'left',
                width: '50%',
                float: 'left',
                padding: '0 10px',
                display: 'inline-block'
              }}>
                <Image
                  show={this.state.show}
                  onClick={() => this.gohome('/')}
                  layer={"header"}
                  animate
                  resources='./img/mine.jpeg'
                  style={{ width: 45, height: 45, margin: 0, display: 'inline-block' }}></Image>
                <Words
                  onClick={() => this.gohome('/')}
                  animate
                  show={this.state.show}
                  style={{
                    display: 'inline-block',
                    fontSize: 28,
                    color: '#a1ecfb',
                    fontFamily: 'Electrolize, sans-serif',
                    textShadow: '0 0 4px',
                    fontWeight: 'bold',
                    textTransform: 'uppercase',
                    margin: '0 0 0 10px',
                    paddingTop: 4,
                    lineHeight: 1,
                    verticalAlign: 'middle'
                  }}>
                  GUO WÉNJUN
                </Words>
              </a>
              <div style={{ textAlign: 'right', width: '50%', float: 'right', padding: '0 10px', marginLeft: 'auto' }}>
                <Link onClick={() => this.gohome('/blog')} style={{ fontFamily: "Electrolize,sans-serif", lineHeight: '45px' }}><i className="mdi mdi-note-outline" /> Blog</Link>
                <Link onClick={() => this.gohome('/paper')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-box-cutter" /> Paper</Link>
                <Link onClick={() => this.gohome('/tools')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-calculator" /> Tools</Link>
              </div>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Header>
          <div
            style={{
              flex: '1',
              padding: '20px 0',
              overflowY: 'auto',
            }}
          >
            <div
              style={{
                margin: '0 auto',
                maxWidth: 800,
                marginBottom: 0,
              }}
            ><Frame
              show={this.state.show}
              animate={true}
              level={0}
              corners={4}
              layer='primary'
            >
                {
                  anim => (
                    <Content style={{ margin: 20 }}>
                      <h1 href='https://gitee.com/mimidegongkai' target="_blank">
                        <Words show={anim.entered} animate style={{ marginLeft: 5 }}>PARER</Words>
                      </h1>
                      <p>
                        <Words style={{ fontFamily: '站酷文艺体' }} animate show={anim.entered}>欢迎来到纸艺术的图纸加工厂,请选择你需要的图纸类型 . . . </Words>
                      </p>
                      <p>
                        <Row>
                          <Col s={6} m={6} l={4} xl={4}>
                            <h3 href='https://gitee.com/mimidegongkai' target="_blank">
                              <Words show={anim.entered} animate style={{ marginLeft: 5 }}>平面图纸</Words>
                            </h3>
                            <List node='ul' style={{ color: '#acf9fb', fontFamily: '站酷文艺体' }}>
                              <li onClick={() => this.gohome('/paper/qianying')}>嵌影纸雕</li>
                              <li style={{ color: 'gray' }}>光影纸雕</li>
                              <li style={{ color: 'gray' }}>蚊香画</li>
                              <li style={{ color: 'gray' }}>字符画</li>
                              <li style={{ color: 'gray' }}>数字油画</li>
                            </List>
                          </Col>
                          <Col s={6} m={6} l={4} xl={4}>
                            <h3 href='https://gitee.com/mimidegongkai' target="_blank">
                              <Words show={anim.entered} animate style={{ marginLeft: 5 }}>立体图纸</Words>
                            </h3>
                            <List node='ul' style={{ color: '#acf9fb', fontFamily: '站酷文艺体' }}>
                              <li style={{ color: 'gray' }}>拼装</li>
                              <li style={{ color: 'gray' }}>浮雕</li>
                            </List>
                          </Col>
                        </Row>
                        {/* <iframe
                          src="//player.bilibili.com/player.html?aid=630099842&bvid=BV1rb4y1D7Gf&cid=322683493&page=1"
                          scrolling="no"
                          border="0"
                          frameborder="no"
                          framespacing="0"
                          allowfullscreen="true">
                        </iframe> */}
                      </p>
                    </Content>
                  )
                }
              </Frame>
            </div>
          </div>
          <Footer animate show={this.state.show} style={{ textAlign: 'left' }}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <Link show={this.state.show} href='https://gitee.com/mimidegongkai' target="_blank">
                <i className="mdi mdi-code-brackets" />
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>Codebase</Words>
              </Link>

              <Link style={{ float: 'right' }} href='http://beian.miit.gov.cn/' target="_blank">
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>京ICP备2021006930号</Words>
              </Link>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Footer>
        </div>
      </Arwes >
    );
  }
}
